<!-- app -->
<template>
  <div class="app flex">
    <div class="target_l" ref="targetNav">
      <div class="scroll" :style="{ height }">
        <div class="target_nav" v-show="isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            三步擒龙
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('qsQscy', $event)"
              >趋势长盈</span
            >
            <span class="target_nav_item" @click="navClick('seDkjc', $event)"
              >多空决策</span
            >
            <span class="target_nav_item" @click="navClick('sqBhln', $event)"
              >冰火量能</span
            >
          </div>
        </div>
        <div class="target_nav" v-show="!isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            四维操盘
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('seQsdy', $event)"
              >趋势大研</span
            >
            <span class="target_nav_item" @click="navClick('seDkjc', $event)"
              >多空决策</span
            >
            <span class="target_nav_item" @click="navClick('seZlcj', $event)"
              >主力突击</span
            >
            <span
              class="target_nav_item select"
              @click="navClick('seMmxf', $event)"
              >买卖先锋</span
            >
            <span
              class="target_nav_item select"
              @click="navClick('seSwcp', $event)"
              >四维操盘平台</span
            >
          </div>
        </div>
        <div class="target_nav">
          <span class="target_nav_txt" @click="navClassify($event)">
            大势智研
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('dsQsdy', $event)"
              >趋势大研</span
            >
            <span class="target_nav_item" @click="navClick('dsDnlj', $event)"
              >动能临界</span
            >
            <span class="target_nav_item" @click="navClick('dsDscp', $event)"
              >大势操盘</span
            >
            <span
              class="target_nav_item"
              v-if="!isOldNew"
              @click="navClick('dsDszy', $event)"
              >大势智研平台</span
            >
          </div>
        </div>
        <div class="target_nav" v-show="isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            辅助指标
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('qsLfyt', $event)"
              >龙凤云图</span
            >
            <span class="target_nav_item" @click="navClick('qsSlby', $event)"
              >双龙博弈</span
            >
            <span class="target_nav_item" @click="navClick('fzjgnl', $event)"
              >机构能量</span
            >
            <span class="target_nav_item" @click="navClick('dxZlcm', $event)"
              >主力筹码</span
            >
            <span class="target_nav_item" @click="navClick('fznxtj', $event)"
              >牛熊天玑</span
            >
            <!-- <span class="target_nav_item" @click="navClick('dsDszy',$event)">大势智研平台</span> -->
          </div>
        </div>
        <div class="target_nav" v-show="!isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            短线跟庄
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('dxDxgz', $event)"
              >短线跟庄</span
            >
            <span class="target_nav_item" @click="navClick('dxDtnl', $event)"
              >动态量能</span
            >
            <span class="target_nav_item" @click="navClick('dxZlcm', $event)"
              >主力筹码</span
            >
            <span class="target_nav_item" @click="navClick('dxQsqf', $event)"
              >强势起飞</span
            >
            <span class="target_nav_item" @click="navClick('dxDx', $event)"
              >短线跟庄平台</span
            >
          </div>
        </div>
        <div class="target_nav" v-show="!isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            神奇波段
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('sqSqbd', $event)"
              >神奇波段</span
            >
            <span class="target_nav_item" @click="navClick('sqBhln', $event)"
              >冰火量能</span
            >
            <span class="target_nav_item" @click="navClick('sqGzld', $event)"
              >跟庄雷达</span
            >
            <span class="target_nav_item" @click="navClick('sqSq', $event)"
              >神奇波段平台</span
            >
          </div>
        </div>
        <div class="target_nav" v-show="!isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            趋势擒龙
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('qsLlps', $event)"
              >龙鳞判势</span
            >
            <span class="target_nav_item" @click="navClick('qsSlby', $event)"
              >双龙博弈</span
            >
            <span class="target_nav_item" @click="navClick('qsLfyt', $event)"
              >龙凤云图</span
            >
            <span class="target_nav_item" @click="navClick('qsQscy', $event)"
              >趋势长盈</span
            >
            <span class="target_nav_item" @click="navClick('qsQl', $event)"
              >趋势擒龙平台</span
            >
          </div>
        </div>
        <div class="target_nav target_nav_ai" v-show="!isOldNew">
          <span class="target_nav_txt" @click="navClassify($event)">
            驭龙AI
            <i class="icon"></i>
          </span>
          <div class="target_nav_list">
            <span class="target_nav_item" @click="navClick('ylYlfk', $event)"
              >驭龙风控</span
            >
            <span class="target_nav_item" @click="navClick('ylYlcw', $event)"
              >驭龙仓位</span
            >
            <!-- <span class="target_nav_item" @click="navClick('ylYlzl',$event)">驭龙主力</span> -->
            <!-- <span class="target_nav_item" @click="navClick('ylAI',$event)">驭龙AI平台</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="target_r">
      <div class="scroll" :style="{ height }" ref="scrollMain">
        <router-view></router-view>
      </div>
    </div>
    <layer
      :title="layerTitle"
      v-show="layerVisible"
      @close="layerVisible = false"
    />
  </div>
</template>

<script>
import hub, { SERVICE_EXCEPTION, TIMEOUT } from "./script/hub";

import layer from "@/component/layer";

const videos = [
  { name: "趋势大研", title: "四维操盘", url: "seQsdy" }, //四维操盘---趋势大研
  { name: "多空决策", title: "四维操盘", url: "seDkjc" }, //四维操盘---多空决策
  { name: "主力突击", title: "四维操盘", url: "seZlcj" }, //四维操盘---主力突击
  { name: "买卖先锋", title: "四维操盘", url: "seMmxf" }, //四维操盘---买卖先锋
  { name: "四维操盘", title: "四维操盘", url: "seSwcp" }, //四维操盘---四维操盘

  { name: "趋势长盈", title: "三步擒龙", url: "qsQscy" }, //三步擒龙---趋势长盈
  { name: "多空决策", title: "三步擒龙", url: "seDkjc" }, //三步擒龙---多空决策
  { name: "冰火量能", title: "三步擒龙", url: "sqBhln" }, //三步擒龙---冰火量能

  { name: "龙凤云图", title: "辅助指标", url: "qsLfyt" }, //辅助指标---龙凤云图
  { name: "双龙博弈", title: "辅助指标", url: "qsSlby" }, //辅助指标---双龙博弈
  { name: "机构能量", title: "辅助指标", url: "fzjgnl" }, //辅助指标---机构能量
  { name: "主力筹码", title: "辅助指标", url: "dxZlcm" }, //辅助指标---主力筹码
  { name: "牛熊天玑", title: "辅助指标", url: "fznxtj" }, //辅助指标---牛熊天玑

  { name: "趋势大研", title: "大势智研", url: "dsQsdy" }, //大势智研---趋势大研
  { name: "动能临界", title: "大势智研", url: "dsDnlj" }, //大势智研---动能临界
  { name: "大势操盘", title: "大势智研", url: "dsDscp" }, //大势智研---大势操盘
  { name: "大势智研平台", title: "大势智研", url: "dsDszy" }, //大势智研---大势智研平台

  { name: "短线跟庄", title: "短线跟庄", url: "dxDxgz" }, //短线跟庄---短线跟庄
  { name: "动态量能", title: "短线跟庄", url: "dxDtnl" }, //短线跟庄---动态量能
  { name: "主力筹码", title: "短线跟庄", url: "dxZlcm" }, //短线跟庄---主力筹码
  { name: "强势起飞", title: "短线跟庄", url: "dxQsqf" }, //短线跟庄---强势起飞
  { name: "短线跟庄平台", title: "短线跟庄", url: "dxDx" }, //短线跟庄---短线跟庄平台

  { name: "神奇波段", title: "神奇波段", url: "sqSqbd" }, //神奇波段---神奇波段
  { name: "冰火量能", title: "神奇波段", url: "sqBhln" }, //神奇波段---冰火量能
  { name: "跟庄雷达", title: "神奇波段", url: "sqGzld" }, //神奇波段---跟庄雷达
  { name: "神奇波段平台", title: "神奇波段", url: "sqSq" }, //神奇波段---神奇波段平台

  { name: "龙鳞判势", title: "趋势擒龙", url: "qsLlps" }, //趋势擒龙---龙鳞判势
  { name: "双龙博弈", title: "趋势擒龙", url: "qsSlby" }, //趋势擒龙---双龙博弈
  { name: "龙凤云图", title: "趋势擒龙", url: "qsLfyt" }, //趋势擒龙---龙凤云图
  { name: "趋势长盈", title: "趋势擒龙", url: "qsQscy" }, //趋势擒龙---趋势长盈
  { name: "趋势擒龙平台", title: "趋势擒龙", url: "qsQl" }, //趋势擒龙---趋势擒龙平台

  { name: "驭龙风控", title: "驭龙AI", url: "ylYlfk" }, //驭龙AI---风控
  { name: "驭龙仓位", title: "驭龙AI", url: "ylYlcw" }, //驭龙AI---仓位
  // { name: "驭龙主力", title: "驭龙AI", url: "ylYlzl" }, //驭龙AI---主力
  // { name: "驭龙AI平台", title: "驭龙AI", url: "ylAI" } //驭龙AI---驭龙AI平台
];
function getNameFromURL() {
  const href = window.location.href;
  const match = href.match(/&zbName=([0-9A-Za-z%.]+)(&||#)/);
  const Amatch = href.match(/\?zbTitle=([0-9A-Za-z%.]+)&/);
  const Bmatch = href.match(/&buildinfo=([0-9.]+)/);
  let name = match ? decodeURI(match[1]) : "";
  const title = Amatch ? decodeURI(Amatch[1]) : "";
  const buildinfo = Bmatch ? Bmatch[1] : "";
  name = name == "驭龙主力" ? "驭龙仓位" : name;
  name = name == "驭龙AI平台" ? "驭龙仓位" : name;
  return { name, title, buildinfo };
}

export default {
  data() {
    return {
      layerTitle: "网络连接错误",
      layerVisible: false,
      targetNav: null, //小标题
      target_nav_txt: null, //大分类
      height: "0",
      isOldNew: "",
      onHref: {
        name: "",
        title: "",
        url: "",
      },
    };
  },
  components: {},
  computed: {},
  mounted() {
    //获取父级的所有子节点
    this.targetNav =
      this.$refs.targetNav.getElementsByClassName("target_nav_item");
    //href选中
    const playName = getNameFromURL();
    this.isOldNew = playName.buildinfo;
    const playIndex = videos.findIndex((it) => {
      this.onHref.url = it.url;
      this.onHref.name = it.name;
      this.onHref.title = it.title;
      return (
        it.name.indexOf(playName.name) != -1 &&
        it.title.indexOf(playName.title) != -1
      );
    });
    if (playIndex >= 0) {
      this.onUrl();
    } else {
      alert("检查指标名称是否正确");
    }

    // 服务器出现异常------网络连接超时
    hub.on(SERVICE_EXCEPTION, () => {
      this.layerVisible = true;
      this.layerTitle = "服务器出现异常";
    });
    hub.on(TIMEOUT, () => {
      this.layerVisible = true;
      this.layerTitle = "网络连接超时";
    });

    //设置内容Height
    this.setFrameHeight();
    window.addEventListener("resize", () => {
      this.setFrameHeight();
    });
  },
  updated() {
    // scrollMain右侧内容滚动条初始位置
    this.$refs.scrollMain.scrollTop = 0;
  },
  methods: {
    //大分类
    navClassify(event) {
      const eve =
        event.target.className == "icon"
          ? event.target.parentNode.parentNode
          : event.target.parentNode;
      const parentClass = eve.className;
      if (parentClass.indexOf("on") == -1) {
        eve.classList.add("on");
        return;
      }
      eve.classList.remove("on");
    },
    //nav导航栏
    navClick(ops, event) {
      this.removeSiblings();
      event.target.classList.add("select");
      this.$router.push({ path: "/" + ops });
    }, //通过url选中
    onUrl() {
      for (var i = 0; i < this.targetNav.length; i++) {
        const html = this.targetNav[i].innerHTML;
        console.log(html, "html===");
        const txt = this.targetNav[i].parentNode.previousSibling;
        console.log(txt, "txt.previousSibling");
        if (txt.previousSibling != null) {
          const textCon = txt.previousSibling.textContent.replace(
            /^\s+|\s+$/g,
            ""
          );
          if (html == this.onHref.name && textCon == this.onHref.title) {
            this.removeSiblings();
            this.targetNav[i].classList.add("select");
            this.targetNav[i].parentNode.parentNode.classList.add("on");
          }
        }
      }
      this.$router.push({ path: "/" + this.onHref.url });
    },
    //删除所有select
    removeSiblings() {
      for (var i = 0; i < this.targetNav.length; i++) {
        this.targetNav[i].classList.remove("select");
      }
    },
    setFrameHeight() {
      this.height = document.body.clientHeight + "px";
    },
  },
};
</script>
<style lang="scss" scoped></style>
